<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文档区</el-breadcrumb-item>
      <el-breadcrumb-item>基础乐理</el-breadcrumb-item>
      <el-breadcrumb-item>和弦</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-alert title="和弦:三个或以上的音的组合" type="warning" show-icon :closable="false">
      </el-alert>
      <el-tabs :tab-position="tabPosition" style="height: 100%;" value="变化和弦">
        <el-tab-pane label="基础和弦">
          <div>
            <h3>三和弦:由三个音按照三度关系堆叠的和弦(根音、三度音、五度音)</h3>
            <el-divider></el-divider>
            <p class="success">以下例子以C大调里面的和弦为例(看不懂几度音的到音程复习)</p>
            <el-table :data="threeTableData" style="width: 100%" stripe border>
              <el-table-column prop="example" label="例子" width="100">
              </el-table-column>
              <el-table-column prop="chordtype" label="和弦类型" width="140">
              </el-table-column>
              <el-table-column prop="compose" label="组成音" width="140">
              </el-table-column>
              <el-table-column prop="three" label="三度音" width="140">
              </el-table-column>
              <el-table-column prop="five" label="五度音" width="140">
              </el-table-column>
              <el-table-column prop="mark" label="符号" width="180">
              </el-table-column>
            </el-table>
            <h3>七和弦:由四个音按照三度关系堆叠的和弦(根音、三度音、五度音、七度音)</h3>
            <el-divider></el-divider>
            <p class="tip">注意:四个音的和弦之所以不叫四和弦,是因为第四个音和第一个音的距离是七度,所以叫七和弦,同理九和弦也是</p>
            <el-table :data="fiveTableData" style="width: 100%" stripe border>
              <el-table-column prop="example" label="例子" width="100">
              </el-table-column>
              <el-table-column prop="chordtype" label="和弦类型" width="140">
              </el-table-column>
              <el-table-column prop="compose" label="组成音" width="140">
              </el-table-column>
              <el-table-column prop="three" label="三度音" width="140">
              </el-table-column>
              <el-table-column prop="five" label="五度音" width="140">
              </el-table-column>
              <el-table-column prop="seven" label="七度音" width="140">
              </el-table-column>
              <el-table-column prop="mark" label="符号" width="180">
              </el-table-column>
            </el-table>
          </div>
          <el-alert title="七和弦也可以这样记「以根音为C做例子」" type="success" style="margin-top: 30px" :closable="false">
          </el-alert>
          <div style="margin-top: 30px;margin-bottom: 200px">
            <img :src="sevensrc">
            <p><span>平常用的时候可以记住这样的规律</span><img :src="sevenFsrc" style="vertical-align: middle;margin-left: 35px"></p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="变化和弦" name="变化和弦">
          <div>
            <h3>add:往和弦里面添加任何一个音！包括各种升降音,或者不在调内的音</h3>
            <el-divider></el-divider>
            <p class="success">比如:Cadd2是在C大三和弦的基础上,直接add一个2音!</p>
            <h3>sus(挂留和弦):将和弦里面的3音挂在2或4音,而原来的3音则直接丢弃</h3>
            <el-divider></el-divider>
            <p class="success">比如:Csus2是在C大三和弦的基础上,直接将3音挂在2音!</p>
            <p class="tip">Csus其实就是Csus4,因为不声明将3音挂在哪里,就默认挂在4音</p>
            <h3>omit:省略和弦里面某一个音！</h3>
            <el-divider></el-divider>
            <p class="success">比如:Cmaj7(omit5)是省略5音的意思！</p>
            <h3>转位和弦:将和弦的三音、五音或七音其中一个转为低音(低音是和弦最低的那个音)</h3>
            <el-divider></el-divider>
            <p class="question">比如C(1 3 5)的第一转位和弦C/E(3 5 1[比原来的1高八度]):就是把三度音看作低音,根音升高一个八度<br>比如C(1 3 5)的第二转位和弦C/G(5 1[比原来的1高八度] 3[比原来的3高八度]):就是把五度音看作低音,根音和三度音升高一个八度</p>
            <p class="tip">以根音为低音的和弦叫原位和弦,其他和弦内音做低音才有了转位和弦</p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="借用和弦">
          <div>
            <h3>借用和弦:拿同一「主音」,但不同「调式」的和弦来用<span class="author">----本章节素材来自官大為(Wiwi Kuan).好和弦系列</span></h3>
            <div style="margin-top: 30px">
              <img :src="borrowsrc">
              <el-alert title="你可以尝试下面的例子(装饰音可以不要),用C小调的和弦替换掉C大调的1645和声进行的「同级」和弦" type="warning" show-icon :closable="false">
              </el-alert>
              <img :src="borrowExamplesrc">
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="副属和弦">
          <div style="margin-bottom: 200px">
            <h3>副属和弦:实际上它是个装饰品,从你要接的和弦往上数五度音的属七和弦就是副属和弦</h3>
            <div style="margin-top: 30px">
              <p class="success">比如有一个和声进行C-Am-F-G,你就可以在C和Am间插一个副属和弦,Am往上数五度音的属七和弦就是E7<br>此时和声进行变成了C-E7-Am-F-G</p>
            </div>
            <el-divider></el-divider>
            <h3>副属和弦的替代品:「三全音代理」和弦</h3>
            <el-alert title="「三全音代理」和弦意思就是跟副属和弦都一样有三个全音的和弦" type="warning" show-icon :closable="false">
            </el-alert>
            <p class="tip">「三全音代理」和弦：从你要接的和弦前面插入升高半音的属七和弦(只要是属和弦都可以)</p>
            <p class="success">比如有一个和声进行C-Am-F-G,你就可以在Am前面加一个#A7和弦</p>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import seven from '../../assets/seven.png'
import sevenf from '../../assets/sevenf.png'
import borrow from '../../assets/borrow.png'
import borrowExample from '../../assets/borrowExample.png'
export default {
  data() {
    return {
      tabPosition: 'left',
      sevensrc: seven,
      sevenFsrc: sevenf,
      borrowsrc: borrow,
      borrowExamplesrc: borrowExample,
      threeTableData: [{
        example: 'C',
        compose: '135',
        chordtype: '大三和弦',
        three: '大三度',
        five: '完全五度',
        mark: '省略'
      }, {
        example: 'Dm',
        compose: '246',
        chordtype: '小三和弦',
        three: '小三度',
        five: '完全五度',
        mark: 'minor(简写:m)'
      }],
      fiveTableData: [{
        example: 'Cmaj7',
        compose: '1357',
        chordtype: '大七和弦',
        three: '大三度',
        five: '完全五度',
        seven: '大七度',
        mark: 'maj7(简写:M7)'
      }, {
        example: 'G7',
        compose: '5724',
        chordtype: '属七和弦',
        three: '大三度',
        five: '完全五度',
        seven: '小七度',
        mark: '7'
      }, {
        example: 'Dm7',
        compose: '2461',
        chordtype: '小七和弦',
        three: '小三度',
        five: '完全五度',
        seven: '小七度',
        mark: 'minor7(简写:m7)'
      }, {
        example: 'Bm7-5',
        compose: '7246',
        chordtype: '半减七和弦',
        three: '小三度',
        five: '减五度',
        seven: '小七度',
        mark: 'm7-5或者m7(b5)'
      }, {
        example: 'Bdim7',
        compose: '724 b6',
        chordtype: '减七和弦',
        three: '小三度',
        five: '减五度',
        seven: '减七度',
        mark: 'dim7'
      }]
    }
  }
}

</script>
<style scoped>
</style>
